<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="/plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="/plugins/kindeditor/lang/zh_CN.js"></script>

	<!-- 文件上传 -->
	<script type="text/javascript" src="/plugins/bootstrap-fileinput/js/fileinput.min.js"></script>
	<script type="text/javascript" src="/plugins/bootstrap-fileinput/js/locales/zh.js"></script>
	<link rel="stylesheet" type="text/css" href="/plugins/bootstrap-fileinput/css/fileinput.min.css">
      
    
    
</head>

<body class="hold-transition skin-red sidebar-mini" >

            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab">扩展属性</a>                                                        
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" >规格</a>                                                        
                            </li>                       
                        </ul>
                        <!--tab头/-->
						
                        <!--tab内容-->
                        <div class="tab-content">


                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">                                  
								   <div class="col-md-2 title">商品分类</div>
									<form id="goodsForm">
		                           	  <div class="col-md-10 data">

		                           	  	<table>
		                           	  		<tr>
		                           	  			<td>
		                           	  				<select name="category1Id" class="form-control" id="itemCatOne" onchange="selectTwo(this.value)">
		                           	  				</select>
		                              			</td>
		                              			<td>
		                           	  				<select name="category2Id" class="form-control select-sm" id="itemCatTwo" onchange="selectThree(this.value)"></select>
		                              			</td>
		                              			<td>
		                           	  				<select name="category3Id" class="form-control select-sm" id="itemCatThree" onchange="selectTypeTemplate(this.value)"></select>
		                              			</td>
		                              			<td>
													模板ID：<span id="typeTemplateId" name="typeTemplateId"></span>
		                              			</td>
		                           	  		</tr>
		                           	  	</table>

		                              </div>

									
		                           <div class="col-md-2 title">商品名称</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" id="goodsName" name="goodsName" placeholder="商品名称">
		                           </div>
		                           
		                           <div class="col-md-2 title">品牌</div>
		                           <div class="col-md-10 data">
		                              <select class="form-control" name="brandId" id="brands"></select>
		                           </div>
		
								   <div class="col-md-2 title">副标题</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" id="caption" name="caption"  placeholder="副标题">
		                           </div>
		                           
		                           <div class="col-md-2 title">价格</div>
		                           <div class="col-md-10 data">
		                           	   <div class="input-group">
			                          	   <span class="input-group-addon">¥</span>
			                               <input type="text" class="form-control" name="price"  placeholder="价格">
		                           	   </div>
		                           </div>
		                           
		                           <div class="col-md-2 title editer">商品介绍</div>
                                   <div class="col-md-10 data editer">
                                       <textarea name="content" id="introduction" style="width:800px;height:400px;visibility:hidden;"  ></textarea>
                                   </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">包装列表</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               
		                           	<textarea rows="4"  class="form-control" name="packageList"  placeholder="包装列表"></textarea>
		                           </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">售后服务</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               <textarea rows="4"  class="form-control" name="saleService"   placeholder="售后服务"></textarea>
		                           </div>
									</form>
                                    
                                </div>
                            </div>


                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">                                  
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
                             		                 
					             </div>
								 
								 <table class="table table-bordered table-striped table-hover dataTable">
					                    <thead>
					                        <tr>
					                            
											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
												<th class="sorting">操作</th>
							            </thead>
					                    <tbody id="tbody">

					                    </tbody>
								 </table> 
								  
                                </div>
                            </div>
                           
                           
                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">
                                <table id="customAttributeTable" class="table table-">

								</table>
                            </div>
                      
                            <!--规格-->
                            <div class="tab-pane" id="spec">
                            	<div class="row data-type">
	                            	<div class="col-md-2 title">是否启用规格</div>
			                        <div class="col-md-10 data">
			                        	<input type="checkbox" >			                           
			                        </div>
                            	</div>
                            	<p>
                            	
                            	<div>
                            	
	                                <div class="row data-type" id="specIds">

	                                </div>
	
	                                
	                                <div class="row data-type">
	                                	 <table class="table table-bordered table-striped table-hover dataTable">
						                    <thead>
						                        <tr>					                          
												    <th class="sorting">屏幕尺寸</th>
													<th class="sorting">网络制式</th>
												    <th class="sorting">价格</th>
												    <th class="sorting">库存</th>
												    <th class="sorting">是否启用</th>
												    <th class="sorting">是否默认</th>
											    </tr>
								            </thead>
						                    <tbody id="itemBody">
						                      <tr>					                           
										            <td>
										            	4.0
										            </td>
													<td>
										            	3G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  <tr>					                           
										            <td>
										            	4.0
										            </td>
													<td>
										            	4G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  <tr>					                           
													<td>
										            	5.0
										            </td>
													<td>
										            	3G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  <tr>					                           
													<td>
										            	5.0
										            </td>
													<td>
										            	4G
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  
						                    </tbody>
									 	</table>
								
	                                </div>
	                                
	                            </div>
                            </div>
                            
                        </div>
                        <!--tab内容/-->
						<!--表单内容/-->
							 
                    </div>
                 	
                 	
                 	
                 	
                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <button class="btn btn-primary" onclick="addGoodsInfo()" ><i class="fa fa-save"></i>保存</button>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
			
            </section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td><input id="colour" class="form-control" placeholder="颜色" >  </td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<table>
							<tr>
								<td>
									<input type="text" id="imageUrl" name="imageUrl">
									<input type="file" id="images" name="image">
					            </td>
							</tr>						
						</table>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" onclick="insertNode()"  data-dismiss="modal" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

            
            <!-- 正文区域 /-->
<script type="text/javascript">

	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true,
			afterBlur: function(){this.sync();}
		});
	});

	$(function (){
		findItemCat();
	})

	function insertNode(){
		var url = $("#imageUrl").val();
		var colour = $("#colour").val();
		var html="";
		html+= "<tr><td>" +
				"<input value='"+colour+"' style='width: 30%' class=\"form-control\" placeholder=\"颜色\">" +
				"</td><td>" +
				"<img height=\"150px\" width=\"150px\" src=\""+url+"\" id='img'>"+
				"</td><td>" +
				"<button onclick='deleteNode(this)' type=\"button\" class=\"btn btn-default\" title=\"删除\" ><i class=\"fa fa-trash-o\"></i> 删除</button>\n" +
				"</td></tr>";
		$("#tbody").append(html);
	}

	function deleteNode(c){
		var tr = c.parentNode.parentNode;
		tr.parentNode.removeChild(tr);
	}

	//查询分类
	function findItemCat(id){
		$.ajax({
			url : "/goods/findItemCat",
			type:"post",
			dataType: "json",
			data : {parentId:id},
			success : function(result){
				if (result.code == 10000){
					var itemCatList = result.data
					var html = '<option ">---请选择---</option>';
					for (var i =0;i<itemCatList.length;i++){
						html+='<option value="'+itemCatList[i].id+'">'+itemCatList[i].name+'</option>'
					}
					$("#itemCatOne").html(html);
					$("#brands").html("<option \">---请选择---</option>");
				}
			},
			error : function(result){
				alert("系统问题")
			}
		})
	}

	function selectTwo(id){
		$.ajax({
			url : "/goods/findItemCat",
			type:"post",
			dataType: "json",
			data : {parentId:id},
			success : function(result){
				if (result.code == 10000){
					var itemCatList = result.data
					var html = '<option ">---请选择---</option>';
					for (var i =0;i<itemCatList.length;i++){
						html+='<option value="'+itemCatList[i].id+'">'+itemCatList[i].name+'</option>'
					}
					$("#itemCatTwo").html(html);
					$("#itemCatThree").html("");
					$("#brands").html("<option \">---请选择---</option>");
				}
			},
			error : function(result){
				alert("系统问题")
			}
		})
	}

	function selectThree(id){
		$.ajax({
			url : "/goods/findItemCat",
			type:"post",
			dataType: "json",
			data : {parentId:id},
			success : function(result){
				if (result.code == 10000){
					var itemCatList = result.data
					var html = '<option ">---请选择---</option>';
					for (var i =0;i<itemCatList.length;i++){
						html+='<option value="'+itemCatList[i].id+'">'+itemCatList[i].name+'</option>'
					}
					$("#itemCatThree").html(html);
				}
			},
			error : function(result){
				alert("系统问题")
			}
		})
	}
	function selectTypeTemplate(id){
		console.log(id)
		$.ajax({
			url : "/goods/selectTypeTemplateByBrand",
			type:"post",
			dataType: "json",
			data : {id:id},
			success : function(result){
				if (result.code == 10000){
					//品牌
					var brandJson = result.data.brandIds;
					var brandList = JSON.parse(brandJson);
					var html = '<option ">---请选择---</option>';
					for (var i =0;i<brandList.length;i++){
						html+="<option value='"+brandList[i].id+"'>"+brandList[i].text+"</option>"
					}
					$("#typeTemplateId").html(result.data.id);
					$("#brands").html(html);

					//扩展属性
					var customAttributeItemJson = result.data.customAttributeItems;
					var customAttributeItemList =JSON.parse(customAttributeItemJson);
					var tableHtml = "";
					for (var i =0;i<customAttributeItemList.length;i++){
						tableHtml+="<tr>";
						tableHtml+="<td>"+customAttributeItemList[i].text+"</td>";
						tableHtml+="<td><input type='text'></td>";
						tableHtml+="</tr>";
					}
					$("#customAttributeTable").html(tableHtml);
					//规格
					console.log(result.data.specVOList);
					var specList = result.data.specVOList;
					var specHtml = "";
					for (var i =0;i<specList.length;i++){
						specHtml+='<div name="specificationName">';
						specHtml+='<div class="col-md-2 title">'+specList[i].text+'</div>';
						var optionsList = specList[i].optionList;
						specHtml+='<div class="col-md-10 data">';
						for (var j =0;j<optionsList.length;j++){
							specHtml+='<span>';
							specHtml+='<input type="checkbox" value="'+optionsList[j].id+'">'+optionsList[j].optionName;
							specHtml+='</span>';
						}
						specHtml+='</div>';
						specHtml+='</div>';
					}
					$("#specIds").html(specHtml);
				}
			},
			error : function(result){
				alert("系统问题")
			}
		})
	}

	//商品图片
	function getItemImages(){
		var itemImagesList = [];
		//获取table中的tr属性
		var trList = $("#tbody").find("tr");
		for (var i = 0;i < trList.length;i++){
			//获取tr中的td属性
			var colorTdList = $(trList[i]).find("td");
			//获取td中的input的第一个值
			var colo = $(colorTdList[0]).find("input").val();
			var url = $(colorTdList[1]).find("img").attr("src");
			var itemImages = {colo : colo,url : url};
			itemImagesList.push(itemImages)
		}
		//对象与字符串转换的工具类
		var itemImages = JSON.stringify(itemImagesList);
		return itemImages;
	}

	//获取扩展属性
	function getCustomAttributeItems(){
		var customAttributeTableList = [];
		//获取table中的tr属性
		var trList = $("#customAttributeTable").find("tr");
		for (var i = 0;i < trList.length;i++){
			//获取tr中的td属性
			var colorTdList = $(trList[i]).find("td");
			//获取td中的input的第一个值
			var custText = $(colorTdList[0]).text();
			var value = $(colorTdList[1]).find("input").val();
			var itemImages = {text : custText,value : value};
			customAttributeTableList.push(itemImages)
		}
		//对象与字符串转换的工具类
		var itemImages = JSON.stringify(customAttributeTableList);
		return itemImages;
	}


	//添加
	function addGoodsInfo(){
		$.ajax({
			url : "/goods/addGoodsByGoodsDesc",
			type:"post",
			dataType: "json",
			data : $("#goodsForm").serialize()+"&introduction="+$("#introduction").val()+"&typeTemplateId="+$("#typeTemplateId").html()+"&itemImages="+getItemImages()+"&customAttributeItems="+getCustomAttributeItems(),
			success : function(result){
				if (result.code == 10000){
					for (var i = 0; i < 4;i++){
						addItem(i,result.data);
					}
				}else {
					alert("添加失败")
				}
			},
			error : function(result){
				alert("系统问题")
			}
		})
	}

	//添加item表
	function addItem(i,id) {
		var trList = $("#itemBody").find("tr");
		var tdList = $(trList[i]).find("td");
		var price = $(tdList[2]).find("input").val();
		var num = $(tdList[3]).find("input").val();
		var spec = "{\"机身内存\":\"32G\",\"网络\":\"电信4G\"}";
		var title = $("#brands option:selected").text() + "  " + $("#goodsName").val() + "  " + $("#caption").val() + "  移动4G 32G";

		$.ajax({
			url: "/item/addItem",
			type: "post",
			data: {
				"title": title,
				"price": price,
				"num": num,
				"image": $("#imageUrl").val(),
				"categoryid": $("#itemCatThree option:selected").val(),
				"goodsId": id,
				"category": $("#itemCatOne option:selected").text(),
				"brand": $("#brands option:selected").text(),
				"spec": spec,
			},
			dataType: "json",
			async: false,
			success: function (result) {
				if (result.code == 10000) {
					alert("增加成功")
				}
			},
			error: function (result) {
				console.log(result);
				alert("增加失败")
			}
		})
	}

	$('#images').fileinput({
		language: 'zh',
		uploadUrl:'/fileController/upLoadFile',
		showCaption: true,
		showUpload: true,
		showRemove: true,
		showClose: true,
		layoutTemplates:{
			actionDelete: ''
		},
		browseClass: 'btn btn-primary'
	}).on("fileuploaded",function (e,result,msg){
		if (result.response.code == 10000){
			var url = result.response.data;
			$("#imageUrl").val(url);
		}
	}).on("fileerror",function (){
		alert("上传失败")
	});
</script>
       
</body>

</html>